<template>
  <div>
    <div class="label">
      <span  v-for="(item,index) in Data" class="spn" :class="{'active':item.isActive}"
            @click="selected(item,index)">
      {{item.name}}
     </span>
      <span class="spn">内科学</span>
      <span class="spn">外科学</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      Data: {
        type: Array,
      },
    },
    methods: {
      selected(item, index) {
        item.isActive = !item.isActive;
        this.$emit('returnValue', this.Data)
      },
    },
  }
</script>

<style scoped>
  .label {
    padding: 5px 0;
    cursor: pointer;
    display: inline-block;
  }

  .label > .spn {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 5px
  }

  .label > .spn:hover {
    color: rgb(0, 102, 255);
    border: 1px solid rgb(0, 102, 255);
  }

  .active {
    color: rgb(0, 102, 255) !important;
    border: 1px solid rgb(0, 102, 255) !important;
  }
</style>
